<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
	.new{	
		font-weight:bold;
        border:thin solid #000000;
        padding:5px;
        background-color:yellow;           
	}
</style>
<script src="/headfirst_js/debug/debug.js"></script>
<script src="/headfirst_js/js/dom.js"></script>
<script>
	var debug;
	
	function create(elem){
		return document.createElement(elem);
	}
	
	function checkElem(elem){
		return elem&&elem.constructor == String?document.createTextNode(elem):elem;
	}
	
	function append(parent,elem){
		parent.appendChild(checkElem(elem));
	}
	function before(parent,before,elem){
		if(elem==null){
			elem = before;
			before = parent;
			parent = before.parentNode;
		}
		parent.insertBefore(checkElem(elem),before);
	}
	
	function add(num){
		var li = create("li");
		attr(li,"class","new");
		if(num==1){
			before(first(tag("ol")[0]),li);
		}else{
			li.appendChild(document.createTextNode("append child"));
			append(tag("ol")[0],li);
		}
	}
	window.onload = function(e){
		debug =  new DebugConsole();	
		
		
	}
</script>
</head>
<body>
<ol></ol>
<div id="container"><strong>기준</strong></div>
<button id="before" onclick="add(1);">before</button> 
<button id="append" onclick="add(2);">append</button>
</body>
</html>